<template>
  <div class="logistics_info">
      <div style="width:100%;height:20rpx;background:#f5f5f5"></div>
      <div class="list" @click="change">
          <div class="list_l">物流公司</div>
          <div class="list_r">
              <input type="text" placeholder="选择物流公司" v-model="columns_name" disabled>
              <image class="more" src="/static/images/more.png" alt=""/>
          </div>
      </div>
      <div class="list" >
          <div class="list_l">物流单号</div>
          <div class="list_r">
              <input type="number" placeholder="填写物流单号" v-model="order_num" >
          </div>
      </div>
      <div class="list" >
          <div class="list_l">联系电话</div>
          <div class="list_r">
              <input type="number" placeholder="填写电话号码" v-model="phone">
          </div>
      </div>
    <div class="up">上传凭证</div>
      <div class="upload">
          <div class="new_img" v-for="(new_item,new_id) in new_list" :key="new_id">
               <image class="up_img" :src="new_item" alt=""/>
                <img class="lose" src="/static/images/shangchu.png" alt="" @click="lose(new_id)">
          </div>
          <div class="img" v-for="(up_item,up_id) in up_list" :key="up_id" @click="upload_img">
              <image class="up_img" :src="up_item.img" alt=""/>
          </div>
      </div> 
      
        <van-popup :show="show" position="bottom" @close="onClose">
          <div class="popup">
            <div class="cancel" @close="onClose">取消</div>
            <div class="popup_list" :style="id==0?'border:none':''" v-for="(key,id) in columns" :key="id" @click="onClick(id)">
                {{key.title}}
            </div> 
          </div>
        </van-popup>
     
      <div class="footer" @click="footer">完成</div>
  </div>
</template>

<script>


export default {
  data () {
    return {
      list:[{title:'物流公司'},{title:'物流单号'},{title:'联系电话'}],
      columns: [{title:'申通快递'},{title:'中通快递'},{title:'圆通快递'},{title:'韵达快递'},{title:'顺丰快递'}],
      show:false,
      new_list:[],
      columns_name:'',
      phone:'',
      order_num:'',
      up_list:[{img:'/static/images/scpz.png'}],  //上传图片
    }
  },
  onLoad(){

  },
  methods: {
      onClose(){
          this.show=false
      },
      change(){
          this.show=true
      },
      onClick(id){
        this.columns_name =this.columns[id].title
        this.show=false
      },
      footer(){
          wx.redirectTo({
            url: '/pages/afterSale/main'
          })
      },
      // 上传图片
      upload_img(){
      var that  = this
      // console.log(that.new_list)
         wx.chooseImage({
          count: 3,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success (res) {
            // console.log(res.tempFilePaths,'图片')
            if(that.new_list==[]){
              that.new_list = res.tempFilePaths
              if(that.new_list.length==3){
                that.up_list=[]
              }
            }else{
                res.tempFilePaths.map((item,index)=>{
                if( that.new_list.length<3){
                  that.new_list.push(item)
                } 
                if(that.new_list.length==3){
                    that.up_list=[]
                  }
              })
            }
            // tempFilePath可以作为img标签的src属性显示图片
            // const tempFilePaths = res.tempFilePaths
          }
        })   
    },
    // 删除图片
    lose(id){
      this.new_list.splice(id,1)
      if(this.new_list.length<3){
        this.up_list= [{img:'/static/images/scpz.png'}]
      } 
      
    },
  },  

  created () {
    
  }
}
</script>

<style scoped lang="less">
  .logistics_info{
    width: 100%;
    height: 100%;
    .list{
      width: 100%;
      height: 84rpx;
      padding: 0 28rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #333;
      font-size: 26px;
      border-bottom: 1px solid #cdcdcd;
      .list_l{
        margin-right: 110rpx;
        white-space: nowrap
      }
      .list_r{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        image{
          width: 18rpx;
          height: 36rpx;
        }
      }
    }
    .popup{
        width: 100%;
        height: 535rpx;
        border-radius:30rpx 30rpx 0rpx 0rpx;
        background: #fff;
        // position: relative;
        padding-bottom: 44rpx;
        box-sizing: border-box;
        .cancel{
          width: 100%;
          padding: 30rpx 0 54rpx 28rpx;
          box-sizing: border-box;
          font-size:28px;
          color: #333;
        }
        .popup_list{
            width: 100%;
            height: 79rpx;
            line-height: 79rpx;
            text-align: center;
            color: #666;
            font-size: 28rpx;
            border-top: 1rpx solid #cdcdcd;
        }
    }
    .up{
        padding: 24rpx 30rpx;
        box-sizing: border-box;
        color: #333;
        font-size: 26rpx;
      }
      .upload{
        width: 100%;
        padding: 0 30rpx;
        box-sizing: border-box;
        display: flex;
        .new_img{
          position: relative;
          .up_img{
            width: 200rpx;
            height: 200rpx;
            margin-right: 20rpx;
          }
          .lose{
            position: absolute;
            width: 40rpx;
            height: 40rpx;
            left: 180rpx;
            top: -20rpx;
          }
        }
        .img{
          position: relative;
          .up_img{
            width: 200rpx;
            height: 200rpx;
            margin-right: 20rpx;
          }
        }
       
      }
      .footer{
        width:600rpx;
        height:80rpx;
        background:rgba(255,61,79,1);
        border-radius:40rpx;
        line-height: 80rpx;
        text-align: center;
        color: #fff;
        font-size: 26rpx;
        position: fixed;
        bottom: 30px;
        left: 75rpx;
      }
  }
</style>
